<template>
  <div class="container">

    <!-- 面包屑导航 -->
    <navbar></navbar>
    <div class="content page-title">
      <h2>订单数据看板</h2>
    </div>
    <div class="content search-content" >
      <!--      <h2>标题-Title</h2>-->
      <search-com type="order" @outputSearchData="receiveSearchData" @searchBasic="getStatistics($event)"></search-com>
    </div>
    <div class="content" v-loading="baseData.loading">
      <!-- <h3 class="card-title">基础数据</h3> -->
      <div class="base-data-list">
        <template class="base-data-item" v-for="(item, index) in baseData.list">
          <basic-data :basicDataItem="item" :basicDataItemIndex="index"></basic-data>
        </template>
      </div>
    </div>
    <div class="content sale-chart">
      <div class="sale-chart-left">
        <h3 class="card-title">
          <label>
          {{ trend.title }}
          <el-tooltip class="item" effect="dark" content="不含未提交及已关闭的订单数据" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </label>
          <div class="staff-button-list">
            <search-com-company class="search-company" type="company"
                                :dateArr="trend.dateArr"
                                @outputSearchData="receiveSearchData" :type="trend.type"></search-com-company>
          </div>
        </h3>
        <div class="card-body" v-loading="trend.loading">
          <total-sales :config="trend.config" :baseData="trend.baseData" :dataList="trend.dataList"></total-sales>
        </div>
      </div>
      <div class="sale-chart-right">
        <h3 class="card-title"><label>下单金额分布占比
          <el-tooltip class="item" effect="dark" content="所有订单应付金额区间分布" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </label>
          <div class="staff-button-list">
            <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table" icon="el-icon-download"></el-button>-->
          </div>
        </h3>
        <search-com-company usePosition="" class="search-company" :type="orderAmount.type"
                            :dateArr="orderAmount.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <distribution v-loading="orderAmount.loading" :config="orderAmount.config" :dataList="orderAmount.dataList"></distribution>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchCom from './components/SearchCom.vue'
import SearchComCompany from './components/SearchComCompany.vue'
import TotalSales from './components/TotalSales.vue'
import Distribution from './components/Distribution.vue'
import BasicData from './components/BasicData.vue'
import DataBoardTable from './components/DataBoardTable.vue'
import dataBoardCommon from './mixins/dataBoardCommon'
import { getDateRange } from '@/utils/index.js'
export default {
  mixins: [dataBoardCommon],
  components: { navbar, SearchCom, SearchComCompany, TotalSales, Distribution, BasicData, DataBoardTable },
  name: 'staffDate',
  data () {
    return {
      loading: false,
      basicDays: 1, // 基础数据默认天数
      page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      baseData: {
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        list: [
          { title: '销售总额', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '75.00' },
          { title: '订单数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -5.01 },
          { title: '客单价', dateArr: ['2022-06-03', '2022-06-03'], totalNumber: '888.88', increase: '55.00' },
          { title: '复购人数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '55.00' },
          { title: '退款订单数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '55.00' },
          { title: '退款用户数', dateArr: ['2022-06-02', '2022-06-02'], totalNumber: '888.88', increase: '55.00' },
          { title: '退款率', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '55.00' },
          { title: '新增客户数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -15 }
        ]
      },
      orderAmount: { // 各平台客户来源占比 下单金额分布占比
        title: '下单金额分布占比',
        loading: false,
        type: 'orderAmount',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {
          color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc']
        },
        dataList: [
          { value: 422, name: '360元以上' },
          { value: 335, name: '315-360元' },
          { value: 310, name: '270-315元' },
          { value: 265, name: '220-270元' },
          { value: 215, name: '180-220元' },
          { value: 152, name: '0-180元' }
        ]
      },
      salese: { // 销售额 总
        config: {
          dateList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        dataList: [
          {
            color: '#1edacd',
            name: '天兰',
            list: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1, 40.1, 62.2, 69.5, 36.4, 45.2, 32.5]
          },
          {
            color: '#4168e7',
            name: '健驰',
            list: [51.1, 51.4, 55.1, 53.3, 73.8, 68.7, 56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
          },
          {
            color: '#2bd753',
            name: '龙源事业部',
            list: [40.1, 62.2, 69.5, 36.4, 45.2, 32.5, 51.1, 51.4, 55.1, 53.3, 73.8, 68.7]
          }
        ]
      },
      saleseTwo: { // 销售额 员工
        config: {
          dataList: [500000, 400000, 300000, 200000, 100000, 1],
          dateList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        dataList: [
          {
            color: '#2d7cdf',
            name: '天兰',
            list: [98666, 150000, 129633, 255555, 366666, 433333, 120000, 88888, 98666, 246666, 153333, 246666]
          },
          {
            color: '#16d7ca',
            name: '健驰',
            list: [150000, 366666, 433333, 366666, 98666, 246666, 433333, 255555, 255555, 366666, 120000, 88888]
          }
        ]
      },
      currentChooseStaff: 1, // 当前选择员工类型
      staffButtonList: [
        { name: '个人', value: 1 },
        { name: '小组', value: 2 },
        { name: '团队', value: 3 }
      ]
    }
  },
  created () {
    this.fetchData()

    // 获取默认数据
    this.fetchDefaultData()
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
      // this.baseDataInit() // 基础数据初始化 格式
    })
  },
  methods: {
    // 获取默认数据
    fetchDefaultData () {
      this.getPlaceOrderMoneyDist(true) // 下单金额分布占比
      this.getStatistics(true) // 订单销售数据统计
      this.getVariation(true) // 销售总额XX天变化趋势
    },
    // 下单金额分布占比
    getPlaceOrderMoneyDist (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.orderAmount.loading = true
      } else {
        return
      }
      this.orderAmount.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 6
      if (isDefault) { // 默认
        this.orderAmount.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.orderAmount.dateArr = this.chooseDateTime(dateArr)
        if (this.orderAmount.dateArr[0].indexOf('undefined') > -1) {
          this.orderAmount.dateArr = this.defaultDateTime(days)
        }
        days = this.orderAmount.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.orderAmount.dateArr[0],
        endTime: this.orderAmount.dateArr[1],
        orgCode: this.orderAmount.orgCode
      }
      this.$api.placeOrderMoneyDist(params).then((res) => {
        this.orderAmount.loading = false
        const dataList = []
        if (res.code == 0) {
          const resData = res.data
          resData.forEach(item => {
            dataList.push({ value: Number(item.moneyDistValue), name: item.moneyDistName })
          })
          this.orderAmount.dataList = dataList
          // console.log(res)
        }
      }).catch((err) => {
        this.orderAmount.loading = false
        console.log(err)
      })
    },
    // 订单销售数据统计
    getStatistics (isDefault, dateArr) {
      this.baseData.loading = true
      // days 1 今天
      // days 1001 昨天
      // days 1070 过去七天
      // days 1071 本周
      // days 1031 本月
      // days 10000 自定义时段
      // debugger
      const days = this.basicDays
      if (isDefault || days === 1 || days === 1001) { // 默认 今天 昨天
        this.baseData.dateArr = this.defaultDateTime(days)
      } else if (days === 1071) { // 本周
        const dateRange = getDateRange('week')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本周，日期范围', this.baseData.dateArr)
      } else if (days === 1031) { // 本月
        const dateRange = getDateRange('month')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本月，日期范围', this.baseData.dateArr)
      } else { // 选择
        console.log(this.baseData.dateArr)
        if (this.baseData.dateArr[0].indexOf('undefined') > -1) {
          if (days === 10000) {
            this.baseData.loading = false
            return this.$message.warning('请选择日期！')
          }
          this.baseData.dateArr = this.defaultDateTime(days)
        }
      }
      // debugger
      const tempOrgCode = this.baseData.orgCode
      if (tempOrgCode == 'undefined' || !tempOrgCode || !/[^\s]/.test(tempOrgCode)) {
        // 为空
        this.baseData.orgCode = this.userInfo.orgCode
      } else {
        // 不为空
        console.log('有选择公司')
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.baseData.dateArr[0],
        endTime: this.baseData.dateArr[1],
        orgCode: this.baseData.orgCode
      }
      this.$api.statisticsOrde(params).then((res) => {
        this.baseData.loading = false
        if (res.code == 0) {
          const resData = res.data
          resData.forEach(item => {
            item.title = item.kanbanName
            // item.totalNumber = this.formatNumber(item.totalNumber, 2)
            // item.totalNumber = item.prevTotalNumber
            // console.log(Number(item.increase))

            if (item.kanbanName.indexOf('总额') > -1 || item.kanbanName.indexOf('客单价') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 2)}</label><span style="font-size: 25px;font-weight: 400;">元</span>`
              item.tip = `系统所有订单应收金额总额`
            }
            if (item.kanbanName.indexOf('订单数') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">单</span>`
              // item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label>`
              if (item.kanbanName.length === 3) {
                item.tip = `系统所有状态订单数量`
              }
            }
            if (item.kanbanName.indexOf('客单价') > -1) {
              item.tip = `GMV÷下单数`
            }
            if (item.kanbanName.indexOf('复购人数') > -1 || item.kanbanName.indexOf('退款用户数') > -1 || item.kanbanName.indexOf('新增客户数') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">人</span>`
              if (item.kanbanName.indexOf('复购人数') > -1){
                item.tip = `购买次数大于1次的人数`
              }
            }
            if (item.kanbanName.indexOf('退款率') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 2)}</label><span style="font-size: 25px;font-weight: 400;">%</span>`
              item.tip = `退款订单 / 订单数 * 100%`
            }
            if (item.kanbanName.indexOf('新增客户数') > -1) {
              item.tip = `系统新创建的客户数`
            }
            item.increaseNum = Number(item.increase)
            item.increase = this.formatNumber(item.increase, 0)
          })
          this.baseData.list = resData
        }
      }).catch((err) => {
        this.baseData.loading = false
        console.log(err)
      })
    },
    fetchData (type) {
      this.loading = true
      if (type === 'reset') {
        // 清空表单，还原数据
        this.$refs['searchForm'].resetFields()
        this.page.pageNo = 1
        this.page.pageSize = 8
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        status: this.page.status
      }
      if (type === 'search') {
        params.pageNo = 1
      }
      const searchForm = this.searchForm
      params = Object.assign(params, searchForm)
      // params.categoryId = searchForm.categoryId[searchForm.categoryId.length - 1]
      // 去除字符串 前后 空格
      for (const item in params) {
        if (params[item] === '') {
          delete params[item]
        }
        continue
        if (typeof params[item] === 'string') {
          params[item] = params[item].trim()
        }
      }
      this.$api.goodsPageList(params).then((res) => {
        if (res.code === 0) {
          this.imageArr = []
          res.data.list.forEach(e => {
            if (e.mainImage && e.mainImage.indexOf('http://fenxiao.muruji.com/') !== 0) {
              e.mainImage = this.ImgHttps + e.mainImage
            }
            e.mainImageArr = []
            e.mainImageArr.push(e.mainImage)
            this.imageArr.push(e.mainImage)
          })
          this.page.list = res.data.list
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
        this.loading = false
      }).catch((err) => {
        this.loading = false
        console.log(err)
      })
    },
    // 点击页码，切换页面
    handleCurrentChange (val) {
      console.log('handleCurrentChange, 点击页码，切换页面')
      this.page.pageNo = val
      this.fetchData()
    },
    handleSizeChange (val) {
      console.log('handleSizeChange, 修改每页显示')
      this.page.pageSize = val
      this.fetchData()
    },
    onChangeStaffType (value) { // 切换员工类型
      this.currentChooseStaff = value
    },
    onDownloadStaff () {
      console.log('onDownloadStaff')
    },
    // 员工数据排行榜 列表字段 展示
    showConfig () {
      const dialog = {
        visible: true,
        title: '员工数据排行榜自定义设置',
        type: 'staffConfig',
        width: '1000px',
        row: {},
        batch: false
      }
      this.dialog = dialog
      console.log('showConfig', this.dialog)
    },
    // 表格 下载 按钮
    performanceStatisticsDownload () {
      console.log('表格 下载 按钮')
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';


.base-data-item {
  width: calc(25% - 55px);
  margin-bottom: 15px;

  &:nth-child(4) {
    margin-right: 0;
  }
}

//各平台客户来源占比
.sale-chart-right {
  .buy-money-box {
    padding: 37px 0;
  }
}

//变化趋势
.sale-chart-left {
  .staff-button-list {
    .search-company {
      //width: 100% !important;
    }
  }
}

.page {
  text-align: right;
  margin: 5px auto;

  /deep/ .btn-prev, /deep/ .btn-next {
    padding: 0 5px;
  }
}

/deep/ .el-dialog__body {
  padding: 20px;
}

//弹窗下载按钮
.performanceStatistics-download {
  width: 120px;
  height: 36px;
  background: #4168E7;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
}
</style>
